import { history, Route, Router } from 'umi';
import React, { useRef } from 'react';
import { Card, Toast, Button, NavBar, Input } from 'antd-mobile';

import styles from './style.less';

const home = () => {
  const listRef = useRef(null); //图片
  const inputRef = useRef(null);
  const onClick = () => {
    // Toast.show('点击了卡片');
    history.push({
      pathname: '/action',
      query: {
        a: '我是action',
      },
    });
  };

  const back = () => {
    onClick();
  };

  const handleClick = () => {
    inputRef.current.focus();
  };
  function scrollToIndex(index: number) {
    const listNode = listRef.current;
    // This line assumes a particular DOM structure:
    const imgNode = listNode.querySelectorAll('li > img')[index];
    imgNode.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest',
      inline: 'center',
    });
  }
  return (
    <>
      <NavBar onBack={back}>
        <div>首页</div>
      </NavBar>
      <div className={styles.contextDom}>
        <Input ref={inputRef} />
        <button onClick={handleClick}>Focus the input</button>
        <div style={{ marginTop: '40px' }}>
          <div>
            <button onClick={() => scrollToIndex(0)}>Tom</button>
            <button onClick={() => scrollToIndex(1)}>Maru</button>
            <button onClick={() => scrollToIndex(2)}>Jellylorum</button>
          </div>
          <div>
            <ul ref={listRef} className={styles.imgBox}>
              <li>
                <img src="https://placekitten.com/g/200/200" alt="Tom" />
              </li>
              <li>
                <img src="https://placekitten.com/g/300/200" alt="Maru" />
              </li>
              <li>
                <img src="https://placekitten.com/g/250/200" alt="Jellylorum" />
              </li>
            </ul>
          </div>
        </div>
      </div>
    </>
  );
};
export default home;
